﻿@model Mobile.Models.Queue

@{
    string VotesRemaining = (Session["Votes"] ?? "XX") + " Votes Remaining";
    bool CanVote = (int?)Session["Votes"] > 0;
}
                
<style type="text/css">
.votes-green 
{
    color:Lime;
    float:right;
}

.votes-red 
{
    color:Maroon;
    float:right;
}
</style>

<section id="main"> 

    <div id="queue" data-role="content">
            <ul data-role="listview"  data-theme="a" data-inset="true">
            <li data-role="list-divider"  data-theme="b">Upcoming <span class="@(CanVote ? "votes-green" : "votes-red")">@VotesRemaining</span></li>
                @foreach (var song in Model.SongList)
                {
                <li data-icon="false" style="padding-top:0;padding-bottom:0;padding-left:0;">                                                 
                    <div style="display:table-row">
                        <div style="display:table-cell;vertical-align:middle; width:1%;">
                            <a onclick="DoVote('@song.ID', false)" 
                                data-role="button" data-icon="arrow-d" data-ajax="false" data-inline="true" 
                                data-iconpos="notext" data-theme="a" style="padding:12px;margin:9px 5px 9px 2px">Vote Down</a>
                        </div>

                        <div style="display:table-cell;width:100%">
                            <h3>@song.Title</h3>
                            <p><strong>@song.Artist</strong></p>
                        </div>

                        <div style="display:table-cell; vertical-align:middle; horizontal-align:right;width:1%;">
                            <a onclick="DoVote('@song.ID', true)" 
                                data-role="button" data-icon="arrow-u" data-ajax="false" data-inline="true" 
                                data-iconpos="notext" data-theme="a" style="padding:12px;margin:9px 2px 9px 5px">Vote Up</a>
                        </div>

                        <div style="clear:both"></div>
                    </div>
                    <span class="ui-li-count">@song.UpVotes</span>
                </li>
                          
                }      
            </ul>  
    </div>
</section>

          @* @Content.Button("#", "arrow-d", " ", "ui-btn", Url)
                @Content.ButtonUpvote("UpVoteButton",song.ID,Model.partyID, "arrow-u", " ", "ui-btn", Url)*@

                      @* JIM THIS KINDA WORKS        <div data-role="controlgroup" data-type="horizontal" width="100%" class="ui-corner-all ui-controlgroup ui-controlgroup-horizontal" style="margin-left: auto; margin-right: auto; width: 100%; text-align: center;">
		<a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="left" data-theme="a" data-inline="true" width="33%" title="My button" class="ui-btn ui-btn-inline ui-btn-icon-notext ui-btn-up-a"><span class="ui-btn-inner ui-corner-left"><span class="ui-btn-text">My button</span><span class="ui-icon ui-icon-arrow-u ui-icon-shadow"></span></span></a>
		
        <a href="index.html" data-role= "button" data-iconpos="notext" data-theme="a" data-inline="true" width="33%" title="My button" class="ui-btn ui-btn-inline ui-btn-icon-notext ui-btn-up-a">
                                     <h3>@song.Title</h3>
                                     <p><strong>@string.Join(", ", song.Artist)</strong></p>
                                </a>
        
        <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="right" data-theme="a" data-inline="true" width="33%" title="My button" class="ui-btn ui-btn-inline ui-btn-icon-notext ui-btn-up-a"><span class="ui-btn-inner ui-corner-right ui-controlgroup-last"><span class="ui-btn-text">My button</span><span class="ui-icon ui-icon-arrow-d ui-icon-shadow"></span></span></a>
		</div>*@